<script>
import { mapGetters } from "vuex";
import TodoForm from "../components/TodoForm.vue";

import { ElOption, ElSelect, ElPagination } from "element-plus";
import { daysOptions, priorityOptions, isFinishedOptions } from "../components/constant"
//导入echarts组件
import Chart from "../components/Chart.vue"

export default {
  components: {
    TodoForm,
    ElSelect,
    ElOption,
    ElPagination,
    Chart
  },
  data() {
    return {
      todos: [],
      showAdd: false,
      conditions: {
        days: "all",
        priority: "all",
        isFinished: "all",
        limit: 3,
        offset: 0,
      },
      page: 1,
      count: 0,
      isEnd: false,
      chartData: [],
    };
  },
  created() {
    this.search();
  },

  computed: {
    user() {
      return this.$store.state.user
    },
    // a() {
    //   this.$store.getters.avatar;
    //   this.$store.state.user.avatar
    // },
    ...mapGetters(["avatar"]),
  },
  methods: {
    async search() {
      const { data } = await this.$request("/todos", { params: this.conditions });
      if (data.success) {
        this.count = data.query.count;
        this.page = data.query.page;
        this.todos = data.query.results;
      }
    },
    handleModifyTodo(todo) {
      this.todos = this.todos.map((t) => (t.id === todo.id ? todo : t));
    },

    async stat() {
      const { data } = await this.$request("/todos/stat");
      if (data.success) {
        // 转换数据格式
        this.chartData = [
          ...data.query.finished.map((i) => ({
            name: "finished." + i.priority,
            value: i.count,
          })),
          ...data.query.notFinished.map((i) => ({
            name: "notFinished." + i.priority,
            value: i.count,
          })),
        ];
      }
    },
  },

  //
  watch: {
    conditions: {
      handler() {
        this.search();
      },
      deep: true,
    },
    todos: {
      handler() {
        this.search();
      },
      deep: true,
    }
  },
  
};
</script>
<template> 
  <div class="h-[110vh] container mx-auto">
    <div class="w-1/3">
      <header>
        <div class="w-24 h-24 rounded-full overflow-hidden">
          <img class="w-full h-full object-cover object-center" :src="avatar" />
        </div>
        <h1 class="text-red-500 text-2xl">{{ user?.username }}的代办</h1>
      </header>
      <Chart :data="chartData" />
      <ElButton @click="showAdd = true">new todo</ElButton>
      <ElButton @click="stat">stat</ElButton>
    </div>
    <div class="w-2/3">
      <RouterView #="{ Component }">
        <component :is="Component" :todos="todos" :conditions="conditions" :isEnd="isEnd"
          @modify-todo="handleModifyTodo" />
      </RouterView>
    </div>
    <ElPagination v-model:current-page="page" :page-size="conditions.limit" :background="true"
      layout="total, prev, pager, next" :total="count"
      @current-change="conditions.offset = (page - 1) * conditions.limit" />
    <div>
      <Todo v-for="todo in todos" :key="todo.id" :todo="todo" @modify-todo="handleModifyTodo" />
    </div>
    <TodoForm v-if="showAdd" v-model="showAdd" title="新建代办" @add-todo="todos.unshift($event), (showAdd = false)" /> -->
 
</div>
</template>



  
  </div>
</template>
